<template>
  <view class="add-comment">
    <image class="bg-logo" src="@/static/image/logo_bg.png" />
    <view class="topbar" :style="topbarStyle">
      <view class="topbar-returnBtn" @click="handleReturnPage">
        <up-icon name="arrow-left" color="white" size="24"></up-icon>
        <text class="topbar-returnBtn-text">返回</text>
      </view>
      <view class="topbar-title">评价</view>
    </view>
    <view class="main" :style="mainStyle">
      <view class="main-title">{{ orderData.checkStation }}</view>
      <view class="main-item">
        <view class="main-item-title"><text class="main-item-title-important">评分</text></view>
        <up-rate v-model="commentData.rate" gutter="0" active-color="#feb93b" inactiveColor="#ffda97" size="32" :readonly="false" />
      </view>
      <view class="main-item">
        <view class="main-item-title"><text class="main-item-title-important">评价</text></view>
        <up-textarea v-model="commentData.content" placeholder="检测站服务、环境如何？ 有什么优点和改进的地方？" height="180" :disabled="false"
          border="none" />
        <view class="main-item-recommend-keyword">
          <view class="main-item-recommend-keyword-item" v-for="item, index in recommendKeyWordList" :key="index" @click="handleConcatRecommendKeyword(item)">
            <view :class="item.isAdd ? 'zoomAnimationClass' : ''">
              <up-icon :name="item.isAdd ? 'thumb-up-fill' : 'thumb-up'" color="#1e7eba" size="18" />
            </view>
            <text class="main-item-recommend-keyword-item-text">{{ item.keyword }}</text>
          </view>
        </view>
        <up-checkbox-group v-model="tempIsAnonymity">
          <up-checkbox shape="circle" activeColor="#1e7eba" label="匿名评论" />
        </up-checkbox-group>
        <!-- <up-checkbox-group>
          <up-checkbox v-model="commentData.isAnonymity" shape="circle" activeColor="#1e7eba" label="匿名评论" />
        </up-checkbox-group> -->
      </view>
    </view>
    <view class="bottom-bar">
      <button class="bottom-bar-btn" @click="handleSubmit">发表评价</button>
    </view>
  </view>
</template>

<script setup>
import { onLoad, onPageScroll } from '@dcloudio/uni-app';
import { ref, computed, reactive } from 'vue';
import API from '@/api';

const { globalData } = getApp();

onLoad(options => {
  if (options.orderId) getOrderDetail(options.orderId);
  else uni.navigateBack();
  getRecommendKeyWords();
})

onPageScroll(e => {
  if (e.scrollTop < topbar.startScroll) topbar.scrollDistance = topbar.startScroll;
  else if (e.scrollTop > topbar.startScroll + topbar.maxScroll) topbar.scrollDistance = topbar.startScroll + topbar.maxScroll;
  else topbar.scrollDistance = e.scrollTop;
})

const topbar = reactive({
  startScroll: 173,
  maxScroll: 20,
  scrollDistance: 0
})

const mainStyle = `margin-top: ${globalData.navBarHeight + globalData.statusBarHeight + 12}px`;
const topbarStyle = computed(() => {
  const colorValue = Math.round((topbar.scrollDistance - topbar.startScroll) / topbar.maxScroll * 255); // 计算颜色值
  const rgbaColor = `rgba(18, 87, 150, ${colorValue / 255})`; // 根据#125796转rgba颜色值计算添加透明度的颜色值
  return `height: ${globalData.menuBottom + 6}px; padding-right: calc(100% - ${globalData.menuLeft - 12}px); padding-top: ${globalData.statusBarHeight}px; background-color: ${rgbaColor}`
})

const tempIsAnonymity  = ref({
  rate: 0,
  content: '',
  isAnonymity: false
})
const commentData = reactive({});
const orderData = ref({});
const recommendKeyWordList = ref([]);

const handleSubmit = async () => {
  const submitData = {
    checkStationId: orderData.value.checkStationId,
    orderId: orderData.value.id,
    userName: globalData.userInfo.nickname,
    avatar: globalData.userInfo.avatar,
    rate: commentData.rate,
    content: commentData.content,
    isAnonymity: tempIsAnonymity.value.length === 0 ? false : true
  }
	// console.log('提交评价', submitData);
  await API.comment.add(submitData);
  uni.$u.toast('非常感谢您的评价!');
  uni.navigateBack();
}

const handleConcatRecommendKeyword = wordItem => {
  wordItem.isAdd = !wordItem.isAdd;
  if (!commentData.content) commentData.content = '';
  if (wordItem.isAdd) {
    const lastChar = commentData.content.slice(-1);
    const needsComma = commentData.content && !/[，。！？、；,.!?;]/.test(lastChar);
    commentData.content += (needsComma ? '，' : '') + wordItem.keyword;
  } else {
    const isStartWithKeyword = commentData.content.startsWith(wordItem.keyword);
    const isKeywordWithChar = commentData.content.charAt(commentData.content.indexOf(wordItem.keyword) + wordItem.keyword.length + 1);
    const regex = isKeywordWithChar && !isStartWithKeyword ? new RegExp(`[，。！？、；,.!?;]?\\s*${wordItem.keyword}`, 'g') : new RegExp(`[，。！？、；,.!?;]?\\s*${wordItem.keyword}\\s*[，。！？、；,.!?;]?`, 'g');
    commentData.content = commentData.content.replace(regex, '').trim();
  }
}

const getRecommendKeyWords = async () => {
  const res = await API.comment.getRecommendKeyWords();
  recommendKeyWordList.value = res.data;
}

const getOrderDetail = async orderId => {
  const res = await API.order.detail(orderId);
  orderData.value = res.data;
}

const handleReturnPage = () => {
  uni.navigateBack();
};
</script>

<style lang="scss" scoped>
.add-comment {
  height: 100vh;
  overflow: auto;
  position: relative;
  background: linear-gradient(to bottom, #0055a5 0, #f7f7f7 520rpx);

  .bg-logo {
    position: fixed;
    top: -3%;
    width: 680rpx;
    height: 600rpx;
    right: 0;
    pointer-events: none;
  }

  .topbar {
    color: white;
    z-index: 1;
    position: fixed;
    width: 100%;
    box-sizing: border-box;
    padding: 0 12px;
    @include flex-row(space-between, center);

    &-returnBtn {
      @include flex-row(flex-start, center);

      &-text {
        margin-left: 4px;
        font-size: 14px;
      }
    }

    &-title {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      max-width: 400rpx;
      @include text-overflow;
    }
  }

  .main {
    // @include card;
    padding-bottom: calc(18px + 45px);

    &-title {
      padding: 0 12px;
      color: $uni-bg-color-grey;
      font-size: 18px;
      font-weight: bold;
    }

    // &-rate {
    //   @include flex-row(flex-start, center);
     
    //   &-title {
    //     color: $uni-text-color;
    //     font-weight: bold;
    //     margin-right: 12px;
    //   }
    // }

    &-item {
        position: relative;
        @include card;
        padding: 12px;
      
        &-title {
          font-size: 15px;
          display: flex;
          align-items: center;
          height: 20px;
          font-weight: bold;
          color: $uni-text-color;
          margin-bottom: 12px;
      
          &-important {
            color: $uni-color-primary;
          }
      
          &::before {
            content: '';
            margin-right: 6px;
            width: 4px;
            height: 100%;
            border-radius: 2px;
            background: $uni-color-gradient-blue;
          }
        }

        &-recommend-keyword {
          @include flex-row;
          flex-wrap: wrap;
          margin-bottom: 6px;

          &-item {
            display: flex;
            padding: 6px 12px;
            border-radius: 12px;
            background-color: $uni-bg-color-grey;
            margin-right: 12px;
            margin-bottom: 6px;
            color: $uni-text-color;

            &-text {
              flex: 1;
              font-size: 12px;
              margin-left: 6px;
            }
          }
        }
      }
  }
  
  .bottom-bar {
    z-index: 9;
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: $uni-bg-color-grey;
    padding: 12px;
    padding-bottom: 18px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
  
    &-btn {
      flex: 1;
      height: 45px;
      line-height: 45px;
      border-radius: 12px;
      box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.02);
      text-align: center;
      color: white;
      font-weight: lighter;
      letter-spacing: 2px;
      background: linear-gradient(145deg, #1e7eba, #0558a8);
    }
  }
}
</style>